<template>
  <div>
    <video-player
      :poster="poster"
      crossorigin="anonymous"
      :controls="true"
      :loop="true"
      :volume="0.6"
      :techOrder="['html5', 'flvjs']"
      autoplay="true"
      width="504px"
      height="255px"
      @mounted="handleMounted"
    />
  </div>
</template>

<script setup>
import { ref } from "vue";
import "video.js/dist/video-js.css";
import { VideoPlayer } from "@videojs-player/vue";

const props = defineProps({
  src: {
    type: String,
    default:
      "http://v2h.jdshipin.com/asia_action/asia_action.stream/chunklist.m3u8",
  },
  videoType: {
    type: String,
    default: "hls",
  },
});
const poster = ref("/src/assets/uiResources/subway.jpeg");

const handleMounted = ({ player }) => {
  player.src(props.src);
};
</script>

<style lang="scss" scoped>

</style>
